General module layout - applies to all modules
Modules are: RELATED, SHARING, SPEED, CAST, AIRPLAY, CHAPTERS, PiP
Modules with overlay are: RELATED, SHARING, SPEED, CHAPTERS
========================================================================== */
.rmp-module {
position: absolute;
width: 48px;
height: 48px;
cursor: pointer;
opacity: 1;
visibility: visible;
top: 8px;
right: 8px;
transition-property: opacity, background, visibility;
transition-duration: 0.4s;
transition-timing-function: ease-in;
}
.rmp-module ~ .rmp-module {
right: 64px;
}
.rmp-module ~ .rmp-module ~ .rmp-module {
right: 120px;
}
.rmp-module ~ .rmp-module ~ .rmp-module ~ .rmp-module {
right: 176px;
}
.rmp-module ~ .rmp-module ~ .rmp-module ~ .rmp-module ~ .rmp-module {
right: 232px;
}
.rmp-module ~ .rmp-module ~ .rmp-module ~ .rmp-module ~ .rmp-module ~ .rmp-module {
right: 288px;
}
.rmp-module ~ .rmp-module ~ .rmp-module ~ .rmp-module ~ .rmp-module ~ .rmp-module ~ .rmp-module {
right: 344px;
}
.rmp-module-button {
width: 48px;
height: 48px;
}
.rmp-module ~ .rmp-module .rmp-module-extended-menu,
.rmp-module ~ .rmp-module ~ .rmp-module .rmp-module-extended-menu,
.rmp-module ~ .rmp-module ~ .rmp-module ~ .rmp-module .rmp-module-extended-menu,
.rmp-module ~ .rmp-module ~ .rmp-module ~ .rmp-module ~ .rmp-module .rmp-module-extended-menu,
.rmp-module ~ .rmp-module ~ .rmp-module ~ .rmp-module ~ .rmp-module ~ .rmp-module .rmp-module-extended-menu,
.rmp-module ~ .rmp-module ~ .rmp-module ~ .rmp-module ~ .rmp-module ~ .rmp-module ~ .rmp-module .rmp-module-extended-menu {
right: -46px;
}
.rmp-module-open-ui .rmp-title-area,
.rmp-module-open-ui .rmp-logo,
.rmp-module-open-ui .rmp-control-bar,
.rmp-module-open-ui .rmp-loading-spin,
.rmp-module-open-ui .rmp-mobile-central-ui,
.rmp-module-open-ui .rmp-overlay-button,
.rmp-module-open-ui .rmp-module,
.rmp-module-open-ui .rmp-360-nav,
.rmp-module-open-ui .rmp-360-text,
.rmp-module-open-ui .rmp-playlist-left-arrow,
.rmp-module-open-ui .rmp-playlist-right-arrow {
visibility: hidden !important;
opacity: 0 !important;
}
.rmp-custom-module-icon {
width: 30px;
height: 30px;
background-repeat: no-repeat;
display: block;
position: absolute;
left: 9px;
top: 9px;
background-position: center;
background-size: 100%;
transition-property: background-image;
transition-duration: 0.4s;
transition-timing-function: ease-in;
}
.rmp-module-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition-property: opacity, visibility;
transition-duration: 0.4s;
transition-timing-function: ease-in;
}
.rmp-module-overlay-icons {
cursor: pointer;
position: absolute;
top: 8px;
width: 48px;
height: 48px;
}
.rmp-module-overlay-close {
right: 8px;
}
.rmp-module-overlay-play-pause {
left: 8px;
}
.rmp-module-overlay label {
display: none;
}
.rmp-overlay-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
overflow-x: hidden;
}
.rmp-overlay-levels-area {
margin-bottom: 12px;
}
.rmp-overlay-level {
position: relative;
height: 30px;
line-height: 26px;
width: 172px;
padding: 0 4px;
left: 50%;
margin-left: -86px;
margin-top: 8px;
margin-bottom: 8px;
border: 2px solid;
cursor: pointer;
font-family: "Arial", "Helvetica", sans-serif !important;
transition-property: background, color, border-color;
transition-duration: 0.4s;
transition-timing-function: ease-in;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rmp-overlay-title {
position: relative;
height: 40px;
margin-top: 8px;
margin-bottom: 16px;
line-height: 40px;
overflow: hidden;
}
.rmp-overlay-title-text {
font-size: 16px;
}
.rmp-sup {
vertical-align: top;
top: -4px;
position: relative;
font-size: 10px;
line-height: inherit;
}
/* hint for module */
.rmp-hint,
.rmp-in-module-hint {
display: inline-block;
opacity: 0;
right: 0;
font-size: 14px;
position: absolute;
top: 52px;
padding: 0 8px;
height: 24px;
line-height: 24px;
white-space: nowrap;
font-family: "Arial", "Helvetica", sans-serif !important;
transition-property: opacity;
transition-duration: 0.4s;
transition-timing-function: ease-in;
}
.rmp-in-module-hint {
right: auto;
left: 50%;
transform: translateX(-50%);
}
.rmp-mobile .rmp-hint,
.rmp-no-hint .rmp-hint,
.rmp-doubleextrasmall .rmp-hint,
.rmp-mobile .rmp-in-module-hint,
.rmp-no-hint .rmp-in-module-hint,
.rmp-doubleextrasmall .rmp-in-module-hint {
display: none !important;
}
.rmp-module-overlay-close .rmp-in-module-hint {
right: 0;
left: auto;
transform: none;
}
.rmp-module-overlay-play-pause .rmp-in-module-hint {
right: auto;
left: 0;
transform: none;
}
.rmp-module:hover .rmp-hint,
.rmp-module-overlay-icons:hover .rmp-in-module-hint {
opacity: 1;
}
/* sharing module layout */
.rmp-sharing-social {
position: relative;
margin-bottom: 16px;
}
.rmp-sharing-social-icons {
margin: 0 10px;
cursor: pointer;
}
.rmp-sharing-link {
position: relative;
height: 30px;
width: 100%;
margin-bottom: 16px;
}
.rmp-sharing-input {
position: absolute;
left: 20%;
width: 60%;
height: 26px;
line-height: 26px;
vertical-align: top;
color: #000000;
padding: 0 6px;
background: #ffffff;
border: none;
border-radius: 4px;
background-clip: padding-box;
}
.rmp-sharing-code {
position: relative;
height: 30px;
width: 100%;
margin-bottom: 16px;
}
.rmp-i-link,
.rmp-i-code {
position: absolute;
left: 8%;
width: 8%;
}
.rmp-i-copy {
position: absolute;
right: 8%;
width: 8%;
cursor: pointer;
}
/**
* chaptering module
*/
.rmp-chapters-text {
width: 320px;
margin-left: -160px;
}
.rmp-extrasmall .rmp-chapters-text {
width: 208px;
margin-left: -104px;
font-size: 12px;
}
/**
* Info module
*/
.rmp-info-text {
padding: 0 56px;
text-align: left;
}
/**
* This section applies to FCC settings in the CC menu
*/
.rmp-module-fcc-settings {
left: 50%;
margin-left: -86px;
height: 30px;
line-height: 26px;
width: 172px;
position: relative;
border: 2px solid;
background: none;
transition-property: color, border-color;
transition-duration: 0.4s;
transition-timing-function: ease-in;
}
.rmp-module-fcc-settings-default {
margin-top: 20px;
margin-bottom: 22px;
}
.rmp-overlay-fcc-settings-area .rmp-select {
position: relative;
display: block;
text-align: center;
text-transform: capitalize;
left: 50%;
padding: 2px;
color: #333;
border: 1px solid #333;
border-radius: 4px;
background-clip: padding-box;
transform: translate(-50%, 0);
}
.rmp-overlay-fcc-settings-area .rmp-option {
text-transform: capitalize;
}
.rmp-module-overlay .rmp-overlay-fcc-settings-area label {
position: relative;
display: block;
text-align: center;
margin: 12px 0 6px;
}
.rmp-overlay-level-active > span:first-of-type::before {
content: '\2714';
padding: 0 4px 0 0;
}
/*
* Live UI (not DVR UI)
*/
.rmp-live .rmp-time-elapsed-text::before {
content: "\2022";
margin-right: 2px;
font-size: 50px;
vertical-align: top;
}
.rmp-live .rmp-seek-bar,
.rmp-live .rmp-duration-text,
.rmp-live .rmp-time-separator {
display: none;
}
.rmp-live.rmp-small .rmp-time,
.rmp-live.rmp-extrasmall .rmp-time,
.rmp-live.rmp-doubleextrasmall .rmp-time {
height: 24px;
line-height: 16px;
}
/*
* DVR UI
*/
/* when casting is engaged DVR streams are handled as simple live streams by Google Cast receiving app */
.rmp-casting.rmp-dvr .rmp-time-total,
.rmp-casting.rmp-dvr .rmp-duration-text,
.rmp-dvr .rmp-time-separator {
display: none;
}
.rmp-dvr .rmp-time {
cursor: pointer;
}
.rmp-dvr .rmp-time-elapsed-text {
padding: 3px 6px;
top: -6px;
}
.rmp-dvr.rmp-dvr-vod .rmp-time-elapsed-text::before {
content: "\21BA";
padding-right: 2px;
}
.rmp-dvr.rmp-dvr-vod .rmp-i-dvr {
display: none;
}
.rmp-dvr.rmp-dvr-vod .rmp-duration-text {
display: inline;
margin-left: 8px;
font-size: 12px;
}
.rmp-dvr.rmp-dvr-vod .rmp-time-elapsed-text {
top: 0;
}
.rmp-dvr.rmp-dvr-vod .rmp-time {
overflow: visible;
}
.rmp-dvr.rmp-dvr-vod.rmp-small .rmp-quality .rmp-control-bar-hint,
.rmp-dvr.rmp-dvr-vod.rmp-small .rmp-fullscreen .rmp-control-bar-hint,
.rmp-dvr.rmp-dvr-vod.rmp-extrasmall .rmp-quality .rmp-control-bar-hint,
.rmp-dvr.rmp-dvr-vod.rmp-extrasmall .rmp-fullscreen .rmp-control-bar-hint {
display: none;
}
.rmp-dvr.rmp-dvr-vod.rmp-small .rmp-time,
.rmp-dvr.rmp-dvr-vod.rmp-extrasmall .rmp-time,
.rmp-dvr.rmp-dvr-vod.rmp-doubleextrasmall .rmp-time {
height: 36px;
line-height: 28px;
width: 120px;
}
/* rmp-dvr-live class is on when we are in live mode inside a DVR stream */
.rmp-dvr.rmp-dvr-live .rmp-i-dvr {
margin-left: 16px;
display: inline;
}
.rmp-dvr.rmp-dvr-live.rmp-small .rmp-i-dvr,
.rmp-dvr.rmp-dvr-live.rmp-extrasmall .rmp-i-dvr {
margin-left: 8px;
}
.rmp-dvr.rmp-dvr-live .rmp-duration-text {
display: none;
}
/* Google Cast - .rmp-cast is the module for casting - also has the .rmp-module class */
.rmp-cast {
position: absolute;
cursor: pointer;
display: block;
opacity: 1;
}
/* the Google-provided cast button within the module */
google-cast-launcher {
padding: 0;
margin: 0;
border: none;
display: inline-block;
background: transparent;
width: 30px;
height: 30px;
margin-top: 9px;
cursor: pointer;
outline: none;
float: none;
text-align: center;
-webkit-filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2));
/* stylelint-disable-line property-no-vendor-prefix */
filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2));
}
/* when casting is engaged .rmp-casting is applied on player container (.rmp-container) */
.rmp-casting-module-overlay-open .rmp-cast-diplay-message-area {
display: none !important;
}
.rmp-casting .rmp-cast-diplay-message-area {
display: block;
}
/* when casting all modules, logo, fullscreen, chapters should be hidden ... */
.rmp-casting .rmp-module,
.rmp-casting .rmp-quality,
.rmp-casting .rmp-logo,
.rmp-casting .rmp-loaded,
.rmp-casting .rmp-fullscreen,
.rmp-casting .rmp-title-area {
display: none !important;
}
/* ... except for the closed captions, related, audio and cast modules
* on Android Google Cast module is adjusted with physical devices */
.rmp-casting:not(.rmp-casting-module-overlay-open) .rmp-module.rmp-cast,
.rmp-casting:not(.rmp-casting-module-overlay-open) .rmp-module.rmp-related,
.rmp-casting:not(.rmp-casting-module-overlay-open) .rmp-control-bar,
.rmp-casting:not(.rmp-casting-module-overlay-open):not(.rmp-waiting) .rmp-mobile-central-ui,
.rmp-casting:not(.rmp-casting-module-overlay-open) .rmp-playlist-left-arrow,
.rmp-casting:not(.rmp-casting-module-overlay-open) .rmp-playlist-right-arrow {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* we do not support casting captions and multi audio tracks with Google Cast Cordova as of now */
.rmp-casting.rmp-casting-cordova .rmp-module.rmp-captions,
.rmp-casting.rmp-casting-cordova .rmp-module.rmp-audio {
display: none !important;
}
.rmp-casting .rmp-module-overlay {
z-index: 1;
}
.rmp-casting .rmp-poster {
display: block !important;
}
/* 360 layout */
.rmp-360-ui .rmp-content {
touch-action: none;
}
.rmp-canvas-360 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.rmp-360-nav {
position: absolute;
top: 8px;
left: 8px;
width: 114px;
height: 156px;
opacity: 1;
visibility: visible;
transition-property: opacity, visibility;
transition-duration: 0.4s;
transition-timing-function: ease-in;
}
.rmp-small .rmp-360-nav {
height: 106px;
width: 106px;
}
.rmp-doubleextrasmall .rmp-360-nav,
.rmp-extrasmall .rmp-360-nav,
.rmp-doubleextrasmall .rmp-360-text {
display: none !important;
}
.rmp-360-text {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 40px;
line-height: 40px;
font-size: 24px;
margin-left: -40px;
margin-top: -78px;
text-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}
.rmp-extrasmall .rmp-360-text {
font-size: 16px;
width: 48px;
height: 24px;
line-height: 24px;
margin-left: -24px;
margin-top: -58px;
}
.rmp-360-nav-button {
width: 30px;
height: 30px;
position: absolute;
}
.rmp-360-nav-top {
top: 6px;
left: 42px;
}
.rmp-small .rmp-360-nav-top {
top: 4px;
left: 38px;
}
.rmp-360-nav-bottom {
left: 42px;
top: 78px;
}
.rmp-small .rmp-360-nav-bottom {
left: 38px;
top: 72px;
}
.rmp-360-nav-left {
left: 6px;
top: 42px;
}
.rmp-small .rmp-360-nav-left {
left: 4px;
top: 38px;
}
.rmp-360-nav-right {
left: 78px;
top: 42px;
}
.rmp-small .rmp-360-nav-right {
left: 72px;
top: 38px;
}
.rmp-360-nav-plus {
left: 78px;
top: 120px;
}
.rmp-360-nav-reset {
left: 42px;
top: 120px;
}
.rmp-360-nav-minus {
left: 6px;
top: 120px;
}
.rmp-small .rmp-360-nav-plus,
.rmp-small .rmp-360-nav-reset,
.rmp-small .rmp-360-nav-minus {
display: none;
}
/* ==========================================================================
This section applies to styling CC/subtitles when they are rendered
with vtt.js or natively
This includes styling for CC/subtitles according to FCC settings
========================================================================== */
/**
* vtt.js
*/
/* closed caption rendering area */
.rmp-cc-area {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
background: transparent;
transition-property: bottom;
transition-duration: 0.4s;
transition-timing-function: ease-in;
}
/* when control bar is visible move up CAPTIONS area so that captions are not hidden by control bar */
.rmp-chrome .rmp-cc-area {
bottom: 40px;
}
/* when control bar is NOT visible move down CAPTIONS area */
.rmp-no-chrome .rmp-cc-area {
bottom: 0;
}
/* .rmp-cc-display is child of .rmp-cc-container child of .rmp-cc-area - apply CSS if required
for FCC settings this is the window area */
.rmp-cc-display {
padding: 1px 2px;
font-size: 17px !important;
background-color: rgba(0, 0, 0, 0) !important;
}
/* .rmp-cc-cue is child of .rmp-cc-display */
.rmp-cc-cue {
margin: 0;
float: none;
text-transform: none;
vertical-align: baseline;
border: none;
padding: 1px 2px;
color: #ffffff !important;
text-shadow: none;
font-size: 100% !important;
background-color: rgba(0, 0, 0, 0.5) !important;
font-family: "Arial", "Helvetica", sans-serif !important;
}
.rmp-fullscreen-on .rmp-cc-cue {
font-size: 150% !important;
}
/**
* This section applies to CC when they are rendered through HLS with hls.js (in-band or in-manifest)
*/
.rmp-native-captions .rmp-cc-container {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 1.5%;
}
.rmp-native-captions .rmp-cc-display {
text-align: center;
white-space: pre-line;
position: absolute;
bottom: 0;
left: 50%;
width: 100%;
line-height: normal;
transform: translateX(-50%);
}
.rmp-native-captions .rmp-cc-cue {
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: inline;
}
/**
* This section applies to CC when they are rendered through DASH & hls.js (in-band or in-manifest)
* In this case we use the native browser CC rendering engine
*/
.rmp-chrome.rmp-s1 video.rmp-video::-webkit-media-text-track-container {
transform: translateY(-48px);
}
.rmp-no-chrome.rmp-s1 video.rmp-video::-webkit-media-text-track-container {
transform: translateY(0);
}
.rmp-chrome.rmp-s2 video.rmp-video::-webkit-media-text-track-container {
transform: translateY(-54px);
}
.rmp-no-chrome.rmp-s2 video.rmp-video::-webkit-media-text-track-container {
transform: translateY(0);
}
video.rmp-video::-webkit-media-text-track-container {
transition-property: transform;
transition-duration: 0.4s;
transition-timing-function: ease-in;
}
.rmp-transcripts-container {
width: 100%;
height: auto;
margin: 0 auto;
font-family: "Arial", "Helvetica", sans-serif !important;
box-sizing: border-box;
}
.rmp-transcripts-container * {
box-sizing: border-box;
}
.rmp-transcripts-player-wrapper {
float: none;
}
/* transcripts side menu */
.rmp-transcripts-side-menu {
overflow: auto;
overflow-x: hidden;
position: relative;
float: none;
height: auto;
max-height: 480px;
width: 100%;
}
/* transcripts side menu header */
.rmp-transcripts-header {
position: relative;
width: 100%;
text-align: center;
height: 32px;
line-height: 32px;
font-size: 16px;
}
.rmp-transcripts-body {
padding: 5px 10px;
text-align: left;
background: rgba(0, 0, 0, 0.3);
}
/* transcripts side menu item */
.rmp-transcripts-item {
height: 64px;
position: relative;
cursor: pointer;
font-size: 14px;
padding: 2px;
transition-property: color, background;
transition-duration: 0.4s;
transition-timing-function: ease-in;
}
@media (min-width: 768px) {
.rmp-transcripts-container {
width: 740px;
height: 270px;
}
.rmp-transcripts-player-wrapper {
width: 480px;
height: 270px;
float: left;
}
.rmp-transcripts-side-menu {
float: left;
width: 260px;
height: 270px;
}
}
@media (min-width: 992px) {
.rmp-transcripts-container {
width: 980px;
height: 360px;
}
.rmp-transcripts-player-wrapper {
width: 640px;
height: 360px;
float: left;
}
.rmp-transcripts-side-menu {
float: left;
width: 340px;
height: 360px;
}
}
@media (min-width: 1200px) {
.rmp-transcripts-container {
width: 1180px;
height: 468px;
}
.rmp-transcripts-player-wrapper {
width: 832px;
height: 468px;
float: left;
}
.rmp-transcripts-side-menu {
float: left;
width: 348px;
height: 468px;
}
}
/* control bar related skip button */
.rmp-related-skip-next {
cursor: pointer;
position: absolute;
left: 104px;
width: 48px;
height: 48px;
white-space: nowrap;
-moz-user-select: none;
/* stylelint-disable-line property-no-vendor-prefix */
-webkit-user-select: none;
/* stylelint-disable-line property-no-vendor-prefix */
-ms-user-select: none;
/* stylelint-disable-line property-no-vendor-prefix */
user-select: none;
}
.rmp-container.rmp-related-ui .rmp-time {
left: 152px;
}
.rmp-container.rmp-related-ui.rmp-small .rmp-time,
.rmp-container.rmp-related-ui.rmp-extrasmall .rmp-time {
left: auto;
right: 8px;
}
.rmp-container.rmp-related-ui .rmp-seek-bar {
left: 264px;
width: calc(100% - 264px - 120px);
}
.rmp-container.rmp-related-ui.rmp-small .rmp-seek-bar,
.rmp-container.rmp-related-ui.rmp-extrasmall .rmp-seek-bar {
left: 168px;
width: calc(100% - 168px - 120px);
}
.rmp-container.rmp-related-ui.rmp-extrasmall .rmp-related-skip-preview,
.rmp-container.rmp-related-ui.rmp-doubleextrasmall .rmp-related-skip-preview,
.rmp-container.rmp-related-ui.rmp-doubleextrasmall .rmp-seek-bar {
display: none !important;
}
.rmp-container.rmp-related-ui.rmp-captions-ui .rmp-seek-bar,
.rmp-container.rmp-related-ui.rmp-audio-ui .rmp-seek-bar {
width: calc(100% - 264px - 168px);
}
.rmp-container.rmp-related-ui.rmp-captions-ui.rmp-small .rmp-seek-bar,
.rmp-container.rmp-related-ui.rmp-audio-ui.rmp-small .rmp-seek-bar {
left: 168px;
width: calc(100% - 168px - 168px);
}
.rmp-container.rmp-related-ui.rmp-captions-ui.rmp-extrasmall .rmp-seek-bar,
.rmp-container.rmp-related-ui.rmp-audio-ui.rmp-extrasmall .rmp-seek-bar {
left: 168px;
width: calc(100% - 168px - 120px);
}
.rmp-container.rmp-related-ui.rmp-captions-ui.rmp-audio-ui .rmp-seek-bar {
left: 264px;
width: calc(100% - 264px - 216px);
}
.rmp-container.rmp-related-ui.rmp-captions-ui.rmp-audio-ui.rmp-small .rmp-seek-bar {
left: 168px;
width: calc(100% - 168px - 216px);
}
.rmp-container.rmp-related-ui.rmp-captions-ui.rmp-audio-ui.rmp-extrasmall .rmp-seek-bar {
left: 168px;
width: calc(100% - 168px - 120px);
}
/* skip overlay */
.rmp-related-skip-preview {
position: absolute;
top: -152px;
left: 20px;
margin-left: -25px;
width: 192px;
height: 152px;
opacity: 0;
visibility: hidden;
font-size: 14px;
cursor: pointer;
transition-property: opacity, visibility;
transition-duration: 0.4s;
transition-timing-function: ease-in;
}
.rmp-small .rmp-related-skip-preview {
top: -124px;
width: 156px;
height: 124px;
}
.rmp-extrasmall .rmp-related-skip-preview {
top: -96px;
width: 120px;
height: 96px;
font-size: 12px;
}
.rmp-related-skip-preview-img {
object-fit: cover;
position: absolute;
left: 0;
top: 22px;
width: 192px;
height: 108px;
}
.rmp-small .rmp-related-skip-preview-img {
width: 156px;
height: 80px;
}
.rmp-extrasmall .rmp-related-skip-preview-img {
width: 120px;
height: 52px;
}
.rmp-related-skip-preview-up-next {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 22px;
line-height: 22px;
padding: 0 4px;
font-family: "Arial", "Helvetica", sans-serif !important;
}
.rmp-related-ui .rmp-related-skip-preview-title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 22px;
line-height: 22px;
padding: 0 4px;
font-family: "Arial", "Helvetica", sans-serif !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* related wall */
.rmp-related-item {
cursor: pointer;
position: absolute;
background: #000000;
margin-bottom: 12px;
transition-property: border-color;
transition-duration: 0.4s;
transition-timing-function: ease-in;
}
.rmp-related-thumbnail {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.rmp-related-title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 24px;
line-height: 24px;
padding: 0 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rmp-related-duration {
position: absolute;
top: 0;
right: 0;
width: auto;
padding: 0 5px;
height: 24px;
line-height: 24px;
}
.rmp-related-up-next {
position: absolute;
top: 0;
left: 0;
width: auto;
padding: 0 5px;
height: 24px;
line-height: 24px;
}
.rmp-related-item-bottom-margin {
position: absolute;
left: 0;
width: 100%;
height: 28px;
background-color: transparent;
}
/* Audio only related */
.rmp-related-audio-only .rmp-poster {
display: block !important;
}
/* playlist slider + player container */
.rmp-playlist-container {
width: 100%;
height: auto;
margin: 0 auto;
font-family: "Arial", "Helvetica", sans-serif !important;
box-sizing: border-box;
}
.rmp-playlist-container * {
box-sizing: border-box;
}
.rmp-playlist-player-wrapper {
float: none;
}
/* in-player navigation arrows */
.rmp-playlist-left-arrow {
left: 8px;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
opacity: 1;
visibility: visible;
cursor: pointer;
border-radius: 4px;
background-clip: padding-box;
transform: translateY(-50%);
transition-property: opacity, visibility;
transition-duration: 0.4s;
transition-timing-function: ease-in;
}
.rmp-playlist-right-arrow {
right: 8px;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
opacity: 1;
visibility: visible;
cursor: pointer;
border-radius: 4px;
background-clip: padding-box;
transform: translateY(-50%);
transition-property: opacity, visibility;
transition-duration: 0.4s;
transition-timing-function: ease-in;
}
/* playlist side menu */
.rmp-playlist-side-menu {
overflow: auto;
overflow-x: hidden;
position: relative;
float: none;
height: auto;
max-height: 480px;
width: 100%;
}
/* playlist side menu header */
.rmp-playlist-header {
position: relative;
width: 100%;
text-align: center;
height: 32px;
line-height: 32px;
font-size: 16px;
}
/* playlist side menu item */
.rmp-playlist-item {
height: 64px;
position: relative;
cursor: pointer;
background: rgba(0, 0, 0, 0.3);
}
.rmp-playlist-item:focus {
outline: none;
}
.rmp-playlist-item:hover {
border-color: transparent;
background: rgba(255, 255, 255, 0.3);
}
/* playlist side menu item number */
.rmp-playlist-item-number {
position: absolute;
left: 0;
width: 6%;
text-align: center;
line-height: 64px;
font-size: 14px;
}
/* playlist side menu item img */
.rmp-playlist-item-thumbnail-wrapper {
position: absolute;
top: 50%;
width: 15%;
height: auto;
left: 9%;
}
.rmp-playlist-item-thumbnail {
width: 100%;
height: auto;
max-height: 49px;
max-width: 84px;
transform: translateY(-50%);
}
/* playlist side menu item text section */
.rmp-playlist-item-text-area {
position: absolute;
left: 27%;
width: 70%;
top: 50%;
max-height: 100%;
overflow: hidden;
padding: 2px 2px 2px 0;
transform: translateY(-50%);
}
/* playlist side menu item title */
.rmp-playlist-item-title {
width: 100%;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* playlist side menu item description */
.rmp-playlist-item-description {
width: 100%;
opacity: 0.85;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
display: block;
display: -webkit-box;
/* stylelint-disable-line value-no-vendor-prefix */
-webkit-line-clamp: 2;
/* stylelint-disable-line property-no-vendor-prefix */
line-clamp: 2;
-webkit-box-orient: vertical;
/* stylelint-disable-line property-no-vendor-prefix */
box-orient: vertical;
}
.rmp-playlist-item-active {
border-color: transparent;
background: rgba(255, 255, 255, 0.3);
}
.rmp-doubleextrasmall .rmp-playlist-right-arrow,
.rmp-doubleextrasmall .rmp-playlist-left-arrow {
display: none !important;
}
/* Audio only playlist */
.rmp-playlist-audio-only .rmp-poster {
display: block !important;
}
/* media queries */
@media (min-width: 768px) {
.rmp-playlist-player-wrapper {
width: 480px;
height: 270px;
float: left;
}
.rmp-playlist-container {
width: 720px;
height: 270px;
}
.rmp-playlist-side-menu {
float: left;
width: 240px;
height: 270px;
}
.rmp-playlist-item-number {
width: 25px;
}
.rmp-playlist-item-thumbnail {
max-height: none;
max-width: none;
height: 100%;
}
.rmp-playlist-item-thumbnail-wrapper {
left: 25px;
width: 69px;
height: 40px;
}
.rmp-playlist-item-text-area {
left: 104px;
width: 126px;
}
}
@media (min-width: 992px) {
.rmp-playlist-player-wrapper {
width: 640px;
height: 360px;
float: left;
}
.rmp-playlist-container {
width: 960px;
height: 360px;
}
.rmp-playlist-side-menu {
float: left;
width: 320px;
height: 360px;
}
.rmp-playlist-item-number {
width: 25px;
}
.rmp-playlist-item-thumbnail-wrapper {
left: 25px;
width: 84px;
height: 49px;
}
.rmp-playlist-item-text-area {
left: 119px;
width: 179px;
}
}
@media (min-width: 1200px) {
.rmp-playlist-player-wrapper {
width: 832px;
height: 468px;
float: left;
}
.rmp-playlist-container {
width: 1140px;
height: 468px;
}
.rmp-playlist-side-menu {
float: left;
width: 308px;
height: 468px;
}
}
/* audio-only */
/* audio only */
.rmp-audio-only .rmp-title-area,
.rmp-audio-only .rmp-module:not(.rmp-cast):not(.rmp-airplay),
.rmp-audio-only .rmp-quality,
.rmp-audio-only .rmp-audio,
.rmp-audio-only .rmp-captions,
.rmp-audio-only .rmp-overlay-button,
.rmp-audio-only .rmp-mobile-central-ui,
.rmp-audio-only .rmp-indicator,
.rmp-audio-only .rmp-fullscreen,
.rmp-audio-only .rmp-volume-container {
display: none !important;
}
/* do not auto hide controls bar */
.rmp-audio-only .rmp-control-bar {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
/* error when audioOnly */
.rmp-audio-only .rmp-error-text {
position: absolute;
top: 0;
left: 0;
background: #000000;
color: #ffffff;
height: 100%;
width: 100%;
line-height: 48px;
padding: 0;
border: none;
z-index: 1000;
margin-top: 0;
font-size: 14px;
transform: none;
}
.rmp-audio-only .rmp-volume,
.rmp-audio-only.rmp-small .rmp-volume,
.rmp-audio-only.rmp-extrasmall .rmp-volume,
.rmp-audio-only .rmp-volume-container,
.rmp-audio-only.rmp-small .rmp-volume-container,
.rmp-audio-only.rmp-extrasmall .rmp-volume-container {
left: 56px;
}
.rmp-audio-only .rmp-i-minus {
position: absolute;
cursor: pointer;
width: 48px;
height: 48px;
left: 104px;
}
.rmp-audio-only .rmp-i-plus {
position: absolute;
cursor: pointer;
width: 48px;
height: 48px;
left: 152px;
}
.rmp-audio-only .rmp-time {
left: 200px;
}
.rmp-audio-only.rmp-small .rmp-time,
.rmp-audio-only.rmp-extrasmall .rmp-time {
left: 200px;
right: auto;
bottom: 0;
background: none;
height: 48px;
line-height: 48px;
padding: 0;
font-size: 12px;
width: 84px;
}
.rmp-audio-only .rmp-seek-bar {
left: 312px;
width: calc(100% - 312px - 24px);
}
.rmp-audio-only.rmp-cast-ui .rmp-seek-bar,
.rmp-audio-only.rmp-airplay-ui .rmp-seek-bar {
width: calc(100% - 312px - 72px);
}
.rmp-audio-only .rmp-cast,
.rmp-audio-only .rmp-airplay {
right: 8px !important;
top: 0;
width: 48px;
height: 48px;
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
.rmp-audio-only.rmp-extrasmall .rmp-cast,
.rmp-audio-only.rmp-extrasmall .rmp-airplay,
.rmp-audio-only.rmp-small .rmp-seek-bar,
.rmp-audio-only.rmp-extrasmall .rmp-seek-bar,
.rmp-audio-only.rmp-doubleextrasmall .rmp-seek-bar,
.rmp-audio-only.rmp-doubleextrasmall .rmp-quick-rewind-or-forward,
.rmp-audio-only.rmp-doubleextrasmall .rmp-quick-rewind-and-forward {
display: none !important;
}
.rmp-audio-only.rmp-small .rmp-quick-rewind-or-forward,
.rmp-audio-only.rmp-extrasmall .rmp-quick-rewind-or-forward,
.rmp-audio-only.rmp-small .rmp-quick-rewind-and-forward,
.rmp-audio-only.rmp-extrasmall .rmp-quick-rewind-and-forward {
display: block !important;
}
.rmp-audio-only.rmp-doubleextrasmall .rmp-i-minus {
left: auto;
right: 56px;
}
.rmp-audio-only.rmp-doubleextrasmall .rmp-i-plus {
left: auto;
right: 8px;
}
.rmp-audio-only.rmp-quick-rewind-or-forward-ui .rmp-volume,
.rmp-audio-only.rmp-small.rmp-quick-rewind-or-forward-ui .rmp-volume,
.rmp-audio-only.rmp-extrasmall.rmp-quick-rewind-or-forward-ui .rmp-volume,
.rmp-audio-only.rmp-quick-rewind-or-forward-ui .rmp-volume-container,
.rmp-audio-only.rmp-small.rmp-quick-rewind-or-forward-ui .rmp-volume-container,
.rmp-audio-only.rmp-extrasmall.rmp-quick-rewind-or-forward-ui .rmp-volume-container {
left: 104px;
}
.rmp-audio-only.rmp-quick-rewind-or-forward-ui .rmp-i-minus,
.rmp-audio-only.rmp-small.rmp-quick-rewind-or-forward-ui .rmp-i-minus,
.rmp-audio-only.rmp-extrasmall.rmp-quick-rewind-or-forward-ui .rmp-i-minus {
left: 152px;
}
.rmp-audio-only.rmp-quick-rewind-or-forward-ui .rmp-i-plus,
.rmp-audio-only.rmp-small.rmp-quick-rewind-or-forward-ui .rmp-i-plus,
.rmp-audio-only.rmp-extrasmall.rmp-quick-rewind-or-forward-ui .rmp-i-plus {
left: 200px;
}
.rmp-audio-only.rmp-quick-rewind-or-forward-ui .rmp-time {
left: 248px;
}
.rmp-audio-only.rmp-small.rmp-quick-rewind-or-forward-ui .rmp-time,
.rmp-audio-only.rmp-extrasmall.rmp-quick-rewind-or-forward-ui .rmp-time,
.rmp-audio-only.rmp-quick-rewind-or-forward-ui .rmp-seek-bar,
.rmp-audio-only.rmp-small.rmp-quick-rewind-or-forward-ui .rmp-seek-bar,
.rmp-audio-only.rmp-extrasmall.rmp-quick-rewind-or-forward-ui .rmp-seek-bar {
display: none !important;
}
.rmp-audio-only.rmp-quick-rewind-and-forward-ui .rmp-volume,
.rmp-audio-only.rmp-small.rmp-quick-rewind-and-forward-ui .rmp-volume,
.rmp-audio-only.rmp-extrasmall.rmp-quick-rewind-and-forward-ui .rmp-volume,
.rmp-audio-only.rmp-quick-rewind-and-forward-ui .rmp-volume-container,
.rmp-audio-only.rmp-small.rmp-quick-rewind-and-forward-ui .rmp-volume-container,
.rmp-audio-only.rmp-extrasmall.rmp-quick-rewind-and-forward-ui .rmp-volume-container {
left: 152px;
}
.rmp-audio-only.rmp-quick-rewind-and-forward-ui .rmp-i-minus,
.rmp-audio-only.rmp-small.rmp-quick-rewind-and-forward-ui .rmp-i-minus,
.rmp-audio-only.rmp-extrasmall.rmp-quick-rewind-and-forward-ui .rmp-i-minus {
left: 200px;
}
.rmp-audio-only.rmp-quick-rewind-and-forward-ui .rmp-i-plus,
.rmp-audio-only.rmp-small.rmp-quick-rewind-and-forward-ui .rmp-i-plus,
.rmp-audio-only.rmp-extrasmall.rmp-quick-rewind-and-forward-ui .rmp-i-plus {
left: 248px;
}
.rmp-audio-only.rmp-quick-rewind-and-forward-ui .rmp-time {
left: 296px;
}
.rmp-audio-only.rmp-small.rmp-quick-rewind-and-forward-ui .rmp-time,
.rmp-audio-only.rmp-extrasmall.rmp-quick-rewind-and-forward-ui .rmp-time,
.rmp-audio-only.rmp-quick-rewind-and-forward-ui .rmp-seek-bar,
.rmp-audio-only.rmp-small.rmp-quick-rewind-and-forward-ui .rmp-seek-bar,
.rmp-audio-only.rmp-extrasmall.rmp-quick-rewind-and-forward-ui .rmp-seek-bar {
display: none !important;
}
.rmp-audio-only.rmp-doubleextrasmall.rmp-quick-rewind-or-forward-ui .rmp-volume,
.rmp-audio-only.rmp-doubleextrasmall.rmp-quick-rewind-or-forward-ui .rmp-volume-container {
left: 56px;
}
.rmp-audio-only.rmp-doubleextrasmall.rmp-quick-rewind-or-forward-ui .rmp-i-minus {
left: 104px;
}
.rmp-audio-only.rmp-doubleextrasmall.rmp-quick-rewind-or-forward-ui .rmp-i-plus {
left: 152px;
}
/* DVR adjustment */
.rmp-dvr.rmp-small .rmp-time,
.rmp-dvr.rmp-extrasmall .rmp-time {
display: none !important;
}
/*
* spinner
*/
.rmp-audio-only .rmp-loading-spin {
left: 8px;
top: 0;
width: 48px;
height: 48px;
margin-top: 0;
margin-left: 0;
}
.rmp-audio-only .rmp-loading-spin-circle {
width: 34px;
height: 34px;
top: 7px;
left: 7px;
}
.rmp-audio-only.rmp-waiting .rmp-play-pause {
display: none !important;
}
.rmp-audio-only-use-video-layout .rmp-poster {
display: block !important;
}
/* ads */
/* ad container where ads are rendered */
.rmp-ad-container {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
display: block;
text-align: initial;
}
/* non-linear (overlay ads) bottom offset
this is not applied in case non-linear ad is taking the full height of the player */
.rmp-ad-overlay {
top: -48px;
}
.rmp-ad-no-auto-align {
top: 0;
}
/* ad information within control bar */
.rmp-ad-info {
position: absolute;
left: 112px;
height: 48px;
line-height: 48px;
text-align: initial;
max-width: calc(100% - 112px - 64px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-moz-user-select: none;
/* stylelint-disable-line property-no-vendor-prefix */
-webkit-user-select: none;
/* stylelint-disable-line property-no-vendor-prefix */
-ms-user-select: none;
/* stylelint-disable-line property-no-vendor-prefix */
user-select: none;
}
.rmp-ad-info-message {
padding: 3px 6px;
font-weight: bold;
}
.rmp-ad-info-pod,
.rmp-ad-info-countdown {
margin-left: 8px;
}
/* remaining time bar for ads */
.rmp-ad-current-time {
position: absolute;
bottom: 48px;
height: 4px;
transition-property: width;
transition-duration: 0.2s;
transition-timing-function: linear;
}
/*
* skip button
* This is used for Google Cast
* When casting is engaged you can skip ad on the remote player
*/
.rmp-ad-skip {
position: absolute;
right: 0;
bottom: 44px;
width: 138px;
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
background-color: #333;
border: 1px solid #333;
transition-property: border-color;
transition-duration: 0.4s;
transition-timing-function: ease-in;
}
.rmp-ad-skip:hover {
border-color: #000000;
}
.rmp-ad-skip-waiting {
width: 100%;
position: absolute;
padding: 0 4px;
color: #cfcfcf;
top: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rmp-ad-skip-message {
width: 65%;
position: absolute;
left: 5%;
top: 0;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rmp-ad-skip-icon {
position: absolute;
top: 0;
left: 75%;
width: 20%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpi/P//PwMUNADxXyBuZsAPcoA4CIjfA/EuIJ4JFgUZBMU3/kNAMZIYNnz8PwIcgokzIdl0A0r3AHEbHhf9RGJ/hjGQDWJFYlcC8SQgZibgzf/YDEIHuUC8CIi58ahhJMYgEIgC4mVALIFNMzIgZBAI+AHxRiCWRfcOqQaBgBkQrwRiMSB+iE0BCwPxwBKIDwLxH0pcBAMPkKOcXIPmALEnED+lxKDJQJwKZUuQa1AVEOch8f+SE9hZQDydGCcjG/QPif0H6pUF+LIFriwCy1dvgTgChyEMaPmPBZuLVKA2RALxbjy+IGjQCiD+RcAQEFgF9fpHIN4GEwQIMACnXWgupdnzwwAAAABJRU5ErkJggg==);
height: 100%;
background-repeat: no-repeat;
background-position: center;
opacity: 0.75;
transition-property: opacity;
transition-duration: 0.4s;
transition-timing-function: ease-in;
}
.rmp-ad-skip:hover .rmp-ad-skip-icon {
opacity: 1;
}
/* rmp-vast - adjustments */
.rmp-ad-container .rmp-ad-non-linear-container,
.rmp-ad-container .rmp-ad-container-skip {
bottom: 52px;
}
/* IMA DAI */
.rmp-ima-dai-click-area {
display: none;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
/* ad scheduler */
.rmp-ad-markers {
position: absolute;
top: 0;
height: 100%;
width: 6px;
}
.rmp-linear-ad-ui .rmp-title-area,
.rmp-linear-ad-ui .rmp-module,
.rmp-linear-ad-ui .rmp-quality,
.rmp-linear-ad-ui .rmp-audio,
.rmp-linear-ad-ui .rmp-captions,
.rmp-linear-ad-ui .rmp-fullscreen .rmp-control-bar-hint,
.rmp-linear-ad-ui .rmp-quick-rewind-or-forward,
.rmp-linear-ad-ui .rmp-quick-rewind-and-forward,
.rmp-linear-ad-ui .rmp-fast-rewind,
.rmp-linear-ad-ui .rmp-fast-forward,
.rmp-linear-ad-ui .rmp-i-plus,
.rmp-linear-ad-ui .rmp-i-minus {
display: none !important;
}
/*
* VPAID
*
* VPAID with no controls or full-slot ad sense === no UI while ad is on stage
*/
.rmp-ad-no-ui .rmp-control-bar,
.rmp-ad-no-ui .rmp-module,
.rmp-ad-no-ui .rmp-loading-spin,
.rmp-ad-no-ui .rmp-mobile-central-ui,
.rmp-ad-no-ui .rmp-overlay-button {
display: none !important;
}
/* VPAID with adVpaidControls: true - force display of controls */
.rmp-ad-vpaid-force-controls .rmp-control-bar {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
.rmp-linear-ad-ui.rmp-quick-rewind-or-forward-ui .rmp-volume,
.rmp-linear-ad-ui.rmp-quick-rewind-or-forward-ui .rmp-volume-container {
left: 56px;
}
/* icons */
.rmp-i {
font-family: 'rmp-font' !important;
/* stylelint-disable-line font-family-no-missing-generic-family-keyword */
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
transition-property: color;
transition-duration: 0.4s;
transition-timing-function: ease-in;
}
.rmp-i-captions::before {
content: "\e048";
}
.rmp-i-facebook::before {
content: "\f09a";
}
.rmp-i-twitter::before {
content: "\f099";
}
.rmp-i-linkedin::before {
content: "\f0e1";
}
.rmp-i-reddit::before {
content: "\f281";
}
.rmp-i-whatsapp::before {
content: "\f232";
}
.rmp-i-email::before {
content: "\f003";
}
.rmp-i-code::before {
content: "\f121";
}
.rmp-i-link::before {
content: "\f0c1";
}
.rmp-i-copy::before {
content: "\f0c5";
}
.rmp-i-left::before {
content: "\f137";
}
.rmp-i-right::before {
content: "\f138";
}
.rmp-i-up::before {
content: "\f139";
}
.rmp-i-down::before {
content: "\f13a";
}
.rmp-i-plus-360::before {
content: "\f055";
}
.rmp-i-minus-360::before {
content: "\f056";
}
.rmp-i-reset-360::before {
content: "\f192";
}
.rmp-i-dvr::before {
content: "\e91b";
}
.rmp-i-quick-rewind-5::before {
content: "\e05b";
}
.rmp-i-quick-rewind-10::before {
content: "\e059";
}
.rmp-i-quick-rewind-30::before {
content: "\e05a";
}
.rmp-i-quick-rewind-tv::before {
content: "\e059";
}
.rmp-i-quick-forward-5::before {
content: "\e058";
}
.rmp-i-quick-forward-10::before {
content: "\e05d";
}
.rmp-i-quick-forward-30::before {
content: "\e057";
}
.rmp-i-quick-forward-tv::before {
content: "\e05d";
}
.rmp-i-airplay::before {
content: "\e055";
}
.rmp-i-airplay-connected {
color: #2196f3;
}
.rmp-i-google-cast::before {
content: "\e307";
}
.rmp-i-google-cast-connected::before {
content: "\e308";
color: #2196f3;
}
.rmp-i-pip::before {
content: "\e926";
}
.rmp-i-info::before {
content: "\e88f";
}
.rmp-i-loop::before {
content: "\e041";
}
.rmp-i-theater::before {
content: "\e3bc";
}
.rmp-theater-on .rmp-i-theater::before {
content: "\e3c0";
}
.rmp-i-chapters::before {
content: "\f02e";
}
.grabbing {
cursor: grabbing;
cursor: -webkit-grabbing;
/* stylelint-disable-line value-no-vendor-prefix */
}
/* icons in the control bar */
.rmp-control-bar .rmp-i {
font-size: 1.86em;
}
/* icons when a module is open */
.rmp-module-overlay .rmp-i {
font-size: 2.14em;
}
/* playlist navigation icons */
.rmp-playlist-left-arrow,
.rmp-playlist-right-arrow {
font-size: 2.42em;
}
/* module icons */
.rmp-module .rmp-i {
position: absolute;
left: 50%;
top: 50%;
font-size: 2.14em;
transform: translate(-50%, -50%);
}
/* 360 nav icon */
.rmp-360-nav-button {
font-size: 2.14em;
}
/* social icons when sharing module is open */
.rmp-module-overlay .rmp-sharing-social .rmp-i {
font-size: 2.14em;
}
/* central play icon */
.rmp-overlay-button .rmp-i-play,
.rmp-overlay-button .rmp-i-pause,
.rmp-overlay-button .rmp-i-replay,
.rmp-mobile-central-ui .rmp-i-play,
.rmp-mobile-central-ui .rmp-i-pause,
.rmp-mobile-central-ui .rmp-i-replay {
font-size: 3.14em;
}
.rmp-font-awesome .rmp-i-play::before {
content: "\f04b";
}
.rmp-font-awesome .rmp-i-replay::before {
content: "\f0e2";
}
.rmp-font-awesome .rmp-i-pause::before {
content: "\f04c";
}
.rmp-font-awesome .rmp-i-volume::before {
content: "\f028";
}
.rmp-font-awesome .rmp-i-volume-half::before {
content: "\f027";
}
.rmp-font-awesome .rmp-i-off-volume::before {
content: "\f026";
}
.rmp-font-awesome .rmp-i-resize-full::before {
content: "\f065";
}
.rmp-font-awesome .rmp-i-resize-small::before {
content: "\f066";
}
.rmp-font-awesome .rmp-i-close::before {
content: "\f00d";
}
/* module icons */
.rmp-font-awesome .rmp-i-speed::before {
content: "\f017";
}
.rmp-font-awesome .rmp-i-quality::before {
content: "\f013";
}
.rmp-font-awesome .rmp-i-audio::before {
content: "\f025";
}
.rmp-font-awesome .rmp-i-sharing::before {
content: "\f1e0";
}
.rmp-font-awesome .rmp-i-chapters::before {
content: "\f02e";
}
/* related */
.rmp-font-awesome .rmp-i-related::before {
content: "\f00a";
}
.rmp-font-awesome .rmp-i-skip-next::before {
content: "\f051";
}
/* audio only */
.rmp-font-awesome .rmp-i-plus::before {
content: "\f067";
}
.rmp-font-awesome .rmp-i-minus::before {
content: "\f068";
}
/* navigation icons */
.rmp-font-awesome .rmp-i-previous::before {
content: "\f053";
}
.rmp-font-awesome .rmp-i-next::before {
content: "\f054";
}
/* rewind/forward icons */
.rmp-font-awesome .rmp-i-fast-rewind::before {
content: "\e905";
}
.rmp-font-awesome .rmp-i-fast-fast-rewind::before {
content: "\e903";
}
.rmp-font-awesome .rmp-i-fast-fast-fast-rewind::before {
content: "\e901";
}
.rmp-font-awesome .rmp-i-fast-forward::before {
content: "\e904";
}
.rmp-font-awesome .rmp-i-fast-fast-forward::before {
content: "\e902";
}
.rmp-font-awesome .rmp-i-fast-fast-fast-forward::before {
content: "\e900";
}
.rmp-font-material .rmp-i-play::before {
content: "\e037";
}
.rmp-font-material .rmp-i-replay::before {
content: "\e042";
}
.rmp-font-material .rmp-i-pause::before {
content: "\e034";
}
.rmp-font-material .rmp-i-volume::before {
content: "\e050";
}
.rmp-font-material .rmp-i-volume-half::before {
content: "\e04d";
}
.rmp-font-material .rmp-i-off-volume::before {
content: "\e04e";
}
.rmp-font-material .rmp-i-resize-full::before {
content: "\e5d0";
}
.rmp-font-material .rmp-i-resize-small::before {
content: "\e5d1";
}
.rmp-font-material .rmp-i-close::before {
content: "\e5cd";
}
/* module icons */
.rmp-font-material .rmp-i-speed::before {
content: "\e425";
}
.rmp-font-material .rmp-i-quality::before {
content: "\e8b8";
}
.rmp-font-material .rmp-i-audio::before {
content: "\e310";
}
.rmp-font-material .rmp-i-sharing::before {
content: "\e80d";
}
/* related */
.rmp-font-material .rmp-i-related::before {
content: "\e5c3";
}
.rmp-font-material .rmp-i-skip-next::before {
content: "\e044";
}
/* audio only */
.rmp-font-material .rmp-i-plus::before {
content: "\e145";
}
.rmp-font-material .rmp-i-minus::before {
content: "\e15b";
}
/* navigation icons */
.rmp-font-material .rmp-i-previous::before {
content: "\e314";
}
.rmp-font-material .rmp-i-next::before {
content: "\e315";
}
/* spinner */
/*
* spinner animation
*/
.rmp-loading-spin-circle {
top: 0;
left: 0;
width: 60px;
height: 60px;
border-radius: 50%;
display: inline-block;
position: absolute;
border: 4px solid;
border-color: #ffffff #ffffff transparent;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* skin specific CSS */
/* s1 specific CSS */
/* applying s1 colors to player */
.rmp-s1 .rmp-color-bg,
.rmp-s1 .rmp-module-overlay-icons,
.rmp-s1 .rmp-related-duration,
.rmp-s1 .rmp-related-up-next,
.rmp-s1 .rmp-related-title,
.rmp-s1 .rmp-volume-indicator,
.rmp-s1 .rmp-volume-hint,
.rmp-playlist-side-menu,
.rmp-transcripts-side-menu,
.rmp-s1.rmp-small .rmp-time,
.rmp-s1.rmp-extrasmall .rmp-time,
.rmp-s1.rmp-doubleextrasmall .rmp-time {
background: rgba(33, 33, 33, 0.85);
}
.rmp-s1 .rmp-ad-markers {
background: #82b1ff;
}
.rmp-s1 .rmp-overlay-level {
border-color: rgba(33, 33, 33, 0.85);
}
.rmp-s1 .rmp-overlay-level-active {
background: #ffffff;
color: rgba(33, 33, 33, 0.85);
border-color: #ffffff;
}
/* border-radius adjustment */
.rmp-s1 .rmp-360-nav,
.rmp-s1 .rmp-360-text,
.rmp-s1 .rmp-module,
.rmp-s1 .rmp-overlay-button,
.rmp-s1 .rmp-mobile-central-ui,
.rmp-s1 .rmp-loading-spin,
.rmp-s1 .rmp-hint,
.rmp-s1 .rmp-in-module-hint,
.rmp-s1 .rmp-control-bar-hint,
.rmp-s1 .rmp-volume-hint,
.rmp-s1 .rmp-indicator,
.rmp-s1 .rmp-overlay-level,
.rmp-s1 .rmp-module-overlay-icons,
.rmp-s1 .rmp-module-fcc-settings,
.rmp-s1 .rmp-duration,
.rmp-s1 .rmp-cue-point-text,
.rmp-s1.rmp-dvr .rmp-time-elapsed-text,
.rmp-s1.rmp-small .rmp-time,
.rmp-s1.rmp-extrasmall .rmp-time,
.rmp-s1.rmp-doubleextrasmall .rmp-time {
border-radius: 4px;
background-clip: padding-box;
}
.rmp-s1 .rmp-volume-indicator,
.rmp-s1.rmp-extrasmall .rmp-volume-container {
border-radius: 4px 4px 0 0;
background-clip: padding-box;
}
.rmp-s1 .rmp-duration {
border-radius: 4px 0 0 4px;
background-clip: padding-box;
}
.rmp-s1 .rmp-volume-handle,
.rmp-s1 .rmp-handle {
border-radius: 14px;
background-clip: padding-box;
}
.rmp-s1 .rmp-volume-bar,
.rmp-s1 .rmp-volume-bar-container,
.rmp-s1 .rmp-time-total,
.rmp-s1 .rmp-current,
.rmp-s1 .rmp-loaded {
border-radius: 11px;
background-clip: padding-box;
}
.rmp-s1 .rmp-current {
min-width: 12px;
}
.rmp-s1 .rmp-loaded {
min-width: 18px;
}
.rmp-s1 .rmp-related-skip-preview-up-next {
border-radius: 4px 4px 0 0;
background-clip: padding-box;
}
/* seek bar adjustment */
.rmp-s1 .rmp-time-total {
top: 13px;
height: 22px;
}
.rmp-s1 .rmp-seek-bar-thumbnails .rmp-indicator {
border-radius: 0 0 4px 4px;
background-clip: padding-box;
}
.rmp-s1 .rmp-seek-bar-thumbnails .rmp-thumbnails {
border-radius: 4px 4px 0 0;
background-clip: padding-box;
}
/* logo */
.rmp-s1.rmp-small .rmp-logo-bottom-right,
.rmp-s1.rmp-extrasmall .rmp-logo-bottom-right {
bottom: 80px;
}
/* Colors for s2 */
/* applying s2 colors to player */
.rmp-s2 .rmp-color-bg,
.rmp-s2 .rmp-module-overlay-icons,
.rmp-s2 .rmp-related-duration,
.rmp-s2 .rmp-related-up-next,
.rmp-s2 .rmp-related-title,
.rmp-s2 .rmp-volume-indicator,
.rmp-s2 .rmp-volume-hint {
background: rgba(0, 0, 0, 0);
}
.rmp-s2 .rmp-control-bar {
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5));
}
.rmp-s2 .rmp-ad-markers,
.rmp-s2 .rmp-cue-point {
background: #ffffff;
}
.rmp-s2 .rmp-volume-handle,
.rmp-s2 .rmp-handle,
.rmp-s2 .rmp-current,
.rmp-s2 .rmp-volume-bar {
background: #82b1ff;
}
.rmp-s2 .rmp-overlay-level:hover:not(.rmp-overlay-level-active) {
color: #82b1ff;
}
.rmp-s2 .rmp-overlay-level {
background: rgba(0, 0, 0, 0.8);
border-color: rgba(0, 0, 0, 0.8);
}
.rmp-s2 .rmp-loaded {
background: rgba(255, 255, 255, 0.3);
}
.rmp-s2 .rmp-overlay-level-active {
background: #ffffff;
color: #82b1ff;
border-color: #ffffff;
}
.rmp-s2 .rmp-overlay-level-active.rmp-abr-active,
.rmp-s2 .rmp-time-total {
border-color: #ffffff;
}
.rmp-s2 .rmp-related-skip-preview-up-next,
.rmp-s2 .rmp-related-skip-preview-title,
.rmp-s2 .rmp-indicator,
.rmp-s2 .rmp-volume-hint,
.rmp-s2 .rmp-volume-indicator,
.rmp-s2 .rmp-cue-point-text,
.rmp-s2 .rmp-related-title {
background: rgba(0, 0, 0, 0.8);
}
.rmp-s2 .rmp-hint,
.rmp-s2 .rmp-in-module-hint,
.rmp-s2 .rmp-control-bar-hint {
background: rgba(0, 0, 0, 0.8);
border: none;
}
.rmp-s2 .rmp-playlist-header,
.rmp-s2 .rmp-playlist-item {
color: rgba(0, 0, 0, 0.8);
}
/* border-radius adjustment */
.rmp-s2 .rmp-overlay-level,
.rmp-s2 .rmp-time,
.rmp-s2 .rmp-time-total,
.rmp-s2 .rmp-hint,
.rmp-s2 .rmp-module-fcc-settings,
.rmp-s2 .rmp-in-module-hint,
.rmp-s2 .rmp-control-bar-hint,
.rmp-s2 .rmp-volume-hint,
.rmp-s2 .rmp-indicator,
.rmp-s2 .rmp-volume-indicator,
.rmp-s2 .rmp-current,
.rmp-s2 .rmp-loaded,
.rmp-s2 .rmp-volume-bar,
.rmp-s2 .rmp-volume-bar-container,
.rmp-s2 .rmp-cue-point-text,
.rmp-s2.rmp-dvr .rmp-time-elapsed-text {
border-radius: 2px;
background-clip: padding-box;
}
.rmp-s2 .rmp-related-skip-preview-up-next {
border-radius: 2px 2px 0 0;
background-clip: padding-box;
}
.rmp-s2 .rmp-related-skip-preview-title,
.rmp-s2 .rmp-seek-bar-thumbnails .rmp-indicator {
border-radius: 0 0 2px 2px;
background-clip: padding-box;
}
.rmp-s2 .rmp-seek-bar-thumbnails .rmp-thumbnails {
border-radius: 2px 2px 0 0;
background-clip: padding-box;
}
/* .rmp-time */
.rmp-s2 .rmp-time,
.rmp-s2.rmp-small .rmp-time,
.rmp-s2.rmp-extrasmall .rmp-time,
.rmp-s2.rmp-live.rmp-small .rmp-time,
.rmp-s2.rmp-live.rmp-extrasmall .rmp-time,
.rmp-s2.rmp-live.rmp-doubleextrasmall .rmp-time {
bottom: 0;
}
.rmp-s2.rmp-small .rmp-time,
.rmp-s2.rmp-extrasmall .rmp-time {
left: 104px;
right: auto;
height: 48px;
line-height: 48px;
background: none;
padding: 0;
}
.rmp-s2.rmp-quick-rewind-or-forward-ui.rmp-small .rmp-time {
left: 152px;
}
.rmp-s2.rmp-quick-rewind-and-forward-ui.rmp-small .rmp-time {
left: 200px;
}
.rmp-s2.rmp-small .rmp-time-separator,
.rmp-s2.rmp-extrasmall .rmp-time-separator,
.rmp-s2.rmp-small .rmp-duration-text,
.rmp-s2.rmp-extrasmall .rmp-duration-text {
display: none !important;
}
.rmp-s2.rmp-small .rmp-time-elapsed-text,
.rmp-s2.rmp-extrasmall .rmp-time-elapsed-text {
margin-left: -50%;
}
.rmp-s2.rmp-dvr.rmp-dvr-vod .rmp-duration-text {
font-size: 14px;
}
.rmp-s2.rmp-quick-rewind-or-forward-ui.rmp-extrasmall .rmp-time,
.rmp-s2.rmp-small.rmp-captions-ui.rmp-quick-rewind-or-forward-ui .rmp-time,
.rmp-s2.rmp-small.rmp-audio-ui.rmp-quick-rewind-or-forward-ui .rmp-time,
.rmp-s2.rmp-extrasmall.rmp-captions-ui.rmp-quick-rewind-or-forward-ui .rmp-time,
.rmp-s2.rmp-extrasmall.rmp-audio-ui.rmp-quick-rewind-or-forward-ui .rmp-time {
display: none !important;
}
.rmp-s2.rmp-related-ui.rmp-small .rmp-time {
left: 152px;
right: auto;
}
.rmp-s2.rmp-related-ui.rmp-extrasmall .rmp-time {
display: none !important;
}
.rmp-s2 .rmp-related-skip-preview {
top: -166px;
}
/* .rmp-seek-bar */
.rmp-s2 .rmp-seek-bar,
.rmp-s2.rmp-captions-ui .rmp-seek-bar,
.rmp-s2.rmp-audio-ui .rmp-seek-bar,
.rmp-s2.rmp-captions-ui.rmp-audio-ui .rmp-seek-bar,
.rmp-s2.rmp-quick-rewind-or-forward-ui .rmp-seek-bar,
.rmp-s2.rmp-quick-rewind-and-forward-ui .rmp-seek-bar,
.rmp-s2.rmp-captions-ui.rmp-quick-rewind-or-forward-ui .rmp-seek-bar,
.rmp-s2.rmp-audio-ui.rmp-quick-rewind-or-forward-ui .rmp-seek-bar,
.rmp-s2.rmp-related-ui .rmp-seek-bar,
.rmp-s2.rmp-related-ui.rmp-small .rmp-seek-bar,
.rmp-s2.rmp-related-ui.rmp-extrasmall .rmp-seek-bar,
.rmp-s2.rmp-related-ui.rmp-captions-ui .rmp-seek-bar,
.rmp-s2.rmp-related-ui.rmp-audio-ui .rmp-seek-bar,
.rmp-s2.rmp-related-ui.rmp-captions-ui.rmp-audio-ui .rmp-seek-bar,
.rmp-s2.rmp-related-ui.rmp-captions-ui.rmp-small .rmp-seek-bar,
.rmp-s2.rmp-related-ui.rmp-audio-ui.rmp-small .rmp-seek-bar,
.rmp-s2.rmp-related-ui.rmp-captions-ui.rmp-audio-ui.rmp-small .rmp-seek-bar,
.rmp-s2.rmp-related-ui.rmp-captions-ui.rmp-extrasmall .rmp-seek-bar,
.rmp-s2.rmp-related-ui.rmp-audio-ui.rmp-extrasmall .rmp-seek-bar,
.rmp-s2.rmp-related-ui.rmp-captions-ui.rmp-audio-ui.rmp-extrasmall .rmp-seek-bar {
left: 8px;
width: calc(100% - 16px);
top: -6px;
height: 6px;
}
.rmp-s2 .rmp-seek-bar:hover,
.rmp-s2.rmp-captions-ui .rmp-seek-bar:hover,
.rmp-s2.rmp-audio-ui .rmp-seek-bar:hover,
.rmp-s2.rmp-captions-ui.rmp-audio-ui .rmp-seek-bar:hover {
top: -8px;
height: 10px;
cursor: pointer;
transition-property: top, height;
transition-duration: 0.2s;
transition-timing-function: linear;
}
.rmp-s2 .rmp-time-total {
height: 100%;
background: rgba(255, 255, 255, 0.3);
}
.rmp-s2 .rmp-volume {
z-index: 1;
}
.rmp-s2 .rmp-volume-handle {
width: 16px;
height: 16px;
margin-top: -8px;
margin-left: -8px;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
border-radius: 16px;
background-clip: padding-box;
}
.rmp-s2 .rmp-handle {
width: 0;
height: 0;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
}
.rmp-s2 .rmp-seek-bar:hover .rmp-handle {
width: 16px;
height: 16px;
margin-top: -8px;
margin-left: -8px;
border-radius: 16px;
background-clip: padding-box;
}
.rmp-s2 .rmp-indicator {
top: -32px;
}
/* volume */
.rmp-s2 .rmp-volume-container {
background: none;
bottom: 30px;
}
.rmp-s2 .rmp-volume-bar-container {
left: 20px;
width: 8px;
background: rgba(255, 255, 255, 0.3);
}
.rmp-s2 .rmp-volume-indicator {
top: -48px;
}
.rmp-s2 .rmp-volume-hint {
top: -78px;
}
.rmp-s2 .rmp-control-bar-hint {
top: -36px;
}
/* Ads CSS */
.rmp-s2 .rmp-ad-info {
line-height: 30px;
height: 30px;
top: 9px;
padding-left: 8px;
padding-right: 8px;
}
.rmp-s2 .rmp-ad-info-message {
padding: 0;
}
.rmp-s2 .rmp-ad-container.rmp-ad-overlay {
top: -58px;
}
/* cue points */
.rmp-s2 .rmp-cue-point-text {
top: -34px;
}
/* outstream skin */
.rmp-outstream .rmp-control-bar {
opacity: 1 !important;
visibility: visible !important;
}
.rmp-outstream .rmp-overlay-button,
.rmp-outstream .rmp-mobile-central-ui,
.rmp-outstream .rmp-loading-spin,
.rmp-outstream .rmp-volume-indicator,
.rmp-outstream .rmp-volume-hint,
.rmp-outstream .rmp-control-bar-hint,
.rmp-outstream .rmp-hint {
background-color: rgba(0, 0, 0, 0.8);
border-radius: 2px;
background-clip: padding-box;
}
.rmp-outstream .rmp-seek-bar,
.rmp-outstream .rmp-time,
.rmp-outstream .rmp-module {
display: none !important;
}
.rmp-outstream .rmp-ad-current-time {
bottom: 0;
}
/* TV skin specific CSS
* Note that TV skin is based on s2 skin
*/
.rmp-tv .rmp-control-bar {
height: 96px !important;
}
.rmp-tv .rmp-seek-bar {
top: -34px !important;
height: 12px !important;
left: 96px !important;
width: calc(100% - 192px) !important;
}
.rmp-medium.rmp-tv .rmp-seek-bar,
.rmp-small.rmp-tv .rmp-seek-bar,
.rmp-extrasmall.rmp-tv .rmp-seek-bar,
.rmp-doubleextrasmall.rmp-tv .rmp-seek-bar {
left: 48px !important;
width: calc(100% - 96px) !important;
}
.rmp-tv .rmp-time {
left: 96px !important;
height: 48px !important;
line-height: 48px !important;
font-size: 32px;
top: 14px !important;
width: auto !important;
}
.rmp-medium.rmp-tv .rmp-time {
left: 48px !important;
font-size: 16px;
}
.rmp-small.rmp-tv .rmp-time,
.rmp-extrasmall.rmp-tv .rmp-time,
.rmp-doubleextrasmall.rmp-tv .rmp-time {
display: none;
}
.rmp-tv .rmp-play-pause {
left: 50% !important;
margin-left: -24px !important;
width: 70px;
height: 70px;
}
.rmp-tv .rmp-control-bar .rmp-i {
font-size: 3.72em;
}
.rmp-tv.rmp-dvr.rmp-dvr-vod .rmp-duration-text {
font-size: 32px;
}
.rmp-tv.rmp-dvr.rmp-dvr-live .rmp-i-dvr {
font-size: 1.25em;
}
.rmp-tv .rmp-control-bar .rmp-fast-forward,
.rmp-tv .rmp-control-bar .rmp-fast-rewind {
font-size: 4.84em;
}
.rmp-tv .rmp-control-bar .rmp-indicator {
font-size: 24px;
height: 40px;
line-height: 40px;
width: 160px;
margin-left: -80px;
top: -50px;
}
.rmp-tv .rmp-control-bar .rmp-fast-indicator {
font-size: 1.86em;
height: 40px;
line-height: 40px;
left: 8px;
width: 40px;
display: inline-block;
position: absolute;
}
.rmp-tv .rmp-control-bar .rmp-time-indicator {
height: 40px;
line-height: 40px;
display: inline-block;
position: absolute;
left: 56px;
width: 96px;
text-align: center;
}
.rmp-medium.rmp-tv .rmp-control-bar .rmp-i,
.rmp-small.rmp-tv .rmp-control-bar .rmp-i,
.rmp-extrasmall.rmp-tv .rmp-control-bar .rmp-i,
.rmp-doubleextrasmall.rmp-tv .rmp-control-bar .rmp-i {
font-size: 1.86em;
}
.rmp-tv .rmp-seek-bar:hover .rmp-handle,
.rmp-tv .rmp-overlay-button,
.rmp-extrasmall.rmp-tv .rmp-fast-rewind,
.rmp-extrasmall.rmp-tv .rmp-fast-forward,
.rmp-doubleextrasmall.rmp-tv .rmp-fast-rewind,
.rmp-doubleextrasmall.rmp-tv .rmp-fast-forward {
display: none !important;
}
.rmp-tv .rmp-loading-spin {
height: 120px !important;
width: 120px !important;
margin-top: -60px !important;
margin-left: -60px !important;
}
.rmp-tv .rmp-loading-spin-circle {
width: 120px !important;
height: 120px !important;
border-width: 6px !important;
}
.rmp-tv .rmp-ad-info {
left: 3%;
height: 48px;
line-height: 48px;
padding-right: 8px;
top: 14px;
font-size: 32px;
}
.rmp-tv.rmp-quick-rewind-and-forward-ui .rmp-quick-rewind-or-forward {
left: 50%;
margin-left: calc(-24px - 96px);
width: 70px;
height: 70px;
}
.rmp-medium.rmp-tv.rmp-quick-rewind-and-forward-ui .rmp-quick-rewind-or-forward,
.rmp-small.rmp-tv.rmp-quick-rewind-and-forward-ui .rmp-quick-rewind-or-forward,
.rmp-extrasmall.rmp-tv.rmp-quick-rewind-and-forward-ui .rmp-quick-rewind-or-forward {
left: 50%;
margin-left: calc(-24px - 48px);
}
.rmp-tv.rmp-quick-rewind-and-forward-ui .rmp-quick-rewind-and-forward {
left: 50%;
margin-left: calc(-24px + 96px);
width: 70px;
height: 70px;
}
.rmp-medium.rmp-tv.rmp-quick-rewind-and-forward-ui .rmp-quick-rewind-and-forward,
.rmp-small.rmp-tv.rmp-quick-rewind-and-forward-ui .rmp-quick-rewind-and-forward,
.rmp-extrasmall.rmp-tv.rmp-quick-rewind-and-forward-ui .rmp-quick-rewind-and-forward {
left: 50%;
margin-left: calc(-24px + 48px);
}
.rmp-tv .rmp-fast-rewind {
position: absolute;
left: 50%;
width: 70px;
height: 70px;
margin-left: calc(-24px - 192px);
}
.rmp-medium.rmp-tv .rmp-fast-rewind,
.rmp-small.rmp-tv .rmp-fast-rewind,
.rmp-extrasmall.rmp-tv .rmp-fast-rewind {
left: 50%;
margin-left: calc(-24px - 96px);
}
.rmp-tv .rmp-fast-forward {
position: absolute;
left: 50%;
width: 70px;
height: 70px;
margin-left: calc(-24px + 192px);
}
.rmp-medium.rmp-tv .rmp-fast-forward,
.rmp-small.rmp-tv .rmp-fast-forward,
.rmp-extrasmall.rmp-tv .rmp-fast-forward {
left: 50%;
margin-left: calc(-24px + 96px);
}
.rmp-tv .rmp-cc-area {
bottom: 120px !important;
}
.rmp-tv .rmp-overlay-level {
height: 60px;
line-height: 56px;
width: 344px;
font-size: 28px;
margin-left: -172px;
margin-bottom: 16px;
}
.rmp-tv .rmp-overlay-title {
margin-top: 16px;
margin-bottom: 32px;
}
.rmp-tv .rmp-overlay-title-text {
font-size: 28px;
}
.rmp-tv .rmp-module-overlay .rmp-i {
font-size: 3.72em;
}
.rmp-tv .rmp-module-overlay-close {
right: 104px !important;
}
.rmp-tv .rmp-module-overlay-icons.rmp-module-overlay-play-pause,
.rmp-tv .rmp-module-fcc-settings {
display: none !important;
}
Go to Yellow Player ← About Us ← Online YouTube Title Generator Free 2024 Compiler
